<!DOCTYPE html>
<html lang="en">
<head>
  <title>CamanJS Examples: HiDPI Support</title>
  
  <script type="text/javascript" src="../../dist/caman.full.js"></script>

  <script type="text/javascript">
  Caman.DEBUG = ('console' in window);
  Caman("#original", function () {
    this.concentrate();
    this.render();
  });

  var caman = Caman("#hidpi", function () {
    this.concentrate();
    this.render();
  });
  </script>
</head>
<body>
  <h1>CamanJS Examples: HiDPI Support</h1>
  <p>You will need a HiDPI capable monitor in order to see a difference between the two images below, such as a Retina Macbook Pro.</p>
  <p>Note: this cannot be accessed locally via the file:// protocol thanks to same-domain origin policy. It must be placed behind a webserver. Images may take a few seconds to render.</p>
  
  <table>
    <tr>
      <td>
        <img 
          id="original"
          src="../images/test1_640.jpg"
        >
        <p>Original</p>
      </td>
      <td>
        <img
          id="hidpi"
          src="../images/test1_640.jpg"
          data-caman-hidpi="../images/test1_1280.jpg"
        >
        <p>HiDPI</p>
      </td>
    </tr>
  </table>
</body>
</html>
